<script setup lang="ts" name="BpmnPreviews">
import PreviewDialog from './PreviewsDialog.vue'

const PreviewDialogRef = ref(null)

const previewProcess = (v) => {
  PreviewDialogRef.value.showDialog(v)
}
</script>

<template>
  <div class="preview">
    <el-dropdown placement="bottom-start" @command="previewProcess">
      <div class="item-button">
        <svg-icon icon="ri:eye-line"></svg-icon>
        <svg-icon icon="ri:arrow-drop-down-line"></svg-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="xml">预览XML</el-dropdown-item>
          <el-dropdown-item command="json">预览JSON</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <PreviewDialog ref="PreviewDialogRef"></PreviewDialog>
  </div>
</template>

<style scoped lang="scss">
.preview{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 32px;
  margin: 2px;
}

.el-dropdown {
  .item-button {
    width: auto;
    line-height: 0;

    .el-icon {
      margin-left: 6px;
    }

    .el-icon+.el-icon {
      margin-right: 2px;
      margin-left: 0;
    }
  }
}

.item-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  cursor: pointer;

  &:hover {
    background-color: var(--el-color-primary-light-9);

    .el-icon {
      color: var(--el-color-primary);
    }
  }

  .el-icon {
    font-size: 20px !important;
  }
}
</style>
